<template>
  <div>
    <el-container>
      <!--首页头部-->
      <el-header style="background-color: #3c90bc; color:#ffffff">

        <el-col span="12">
          <h2>云宝智能管家</h2>
        </el-col>

        <el-col span="12" class="right">
          右边
        </el-col>

      </el-header>
      <el-container class="manContainer">
        <!--      侧边栏-->
        <el-aside width="200px" >


          <el-menu default-active="1-4-1"
                   class="el-menu-vertical-demo"
                   @open="handleOpen"
                   @close="handleClose"
                   :router="true"
                   :unique-opened="true"
                   :default-active="this.$route.path"

          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">导航一</span>
              </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-box"></i>
                <span slot="title">基础资料</span>
              </template>
              <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name"
              >
                {{item.navItem}}
              </el-menu-item>

            </el-submenu>

          </el-menu>

        </el-aside>

        <el-container style=";background-color: #fafafa">
          <!--          style=";background-color: #fafafa"-->
          <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
            </el-breadcrumb>

            <router-view style="margin-top: 20px"></router-view>
          </el-main>
          <!--        <el-footer>Footer</el-footer>-->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Storage from "./basedata/Storage";

  export default {
    name: "Home",
    data() {
      return {
        navList: [
          {name: '/basedata/goods', navItem: '商品列表'},
          {name: '/basedata/goodsunit', navItem: '商品单位'},
          {name: '/basedata/goodscategory', navItem: '商品分类'},
          {name: '/basedata/storage', navItem: '仓库列表'},
          {name: '/basedata/account', navItem: '结算账户'},
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    components: {
      Storage
    }
  }

</script>

<style>
  /* .el-menu-vertical-demo:not(.el-menu--collapse) {
     width: 200px;
     height: 100%;
     max-height: max-content;
     !*min-height: 400px;*!
   }*/
  .manContainer {
    height: 800px;
  }
  el-menu-item{
    background-color: #293846;
  }
</style>
